<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位学习</title>
    <style>
        .ysa{
            width: 200px;
            height: 200px;
            background: orange;
            text-align: center;
            line-height: 100px;
            /*position: fixed;  !*这个就是浏览器的绝对定位 与浏览器的位置始终保持不变 *!*/
            position: sticky;
            top: 50px;
            margin-top: 100px;

        }

        .pxd{
            position: relative;/*相对定位*/
            top:-10px; /*0位置不变，如果值为负数，那就是往上移了*/
            left:-15px;
            font-size: 10px;

        }
        .pdd{
            position: relative;/*相对定位*/
            top:5px; /*0位置不变，如果值为负数，那就是往上移了*/
            left:-5px;
            font-size: 10px;
        }

        .pjd{
            position: absolute;  /*这个是绝对定位*/
            top: 0px;
            right: 0px;
        }
    </style>
</head>
<body>

    <div class="ysa">
        面积S=a <span class="pdd">n</span> <span class="pxd">2</span>
        <button class="pjd">关闭 </button>

    </div>
<!--  目标：把2放在字母a的右上角，通过相对定位   -->


<!--
    position定位
    1.static默认值，元素无2设置的时候就是static
    2.relative 相对定位，对于当前位置进行调整
    3.absolute 绝对定位，对于非static的父节点进行定位
    4.fixed 固定定位 相对于浏览器窗口固定的，即使页面滚动，该元素也会保持在同一位置

    5.sticky 粘性定位： 一种相对定位和固定定位的结合。元素根据用户的滚动位置在特定阈值内切换这两种状态。
                        它需要指定一个阈值,滚动前是relative ,滚动后是fixed
-->


我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>
我这里是多行<br>

</body>
</html>